import React, {Component} from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import PubSub from 'pubsub-js'

// npm install --save axios   运行时需要


/*
* 法送请求都要更新Main里面的状态
* */
export default class Main extends Component{




    /*
    * 有四种状态
    * */
    state = {
        initView: true, // 初始化时  显示提示输入
        loading: false, // 等待阶段就在加载进行搜索
        users: null,    // 展示用户列表
        errorMsg:null,  // 异常显示错误信息
    }


    /*
    * 初始化的时候就应该订阅消息
    * */
    componentDidMount() {
        // 订阅消息
        PubSub.subscribe('search',(msg, searchName) => {
            // 这是一个回调函数  回调函数里面的this肯定不是组件对象
            // 所以应该使用箭头函数
            // 在准备发送请求之前先要更新状态 (将初识化状态  ==>>   请求中状态)
            this.setState({
                initView: false,
                loading: true
            })
            // 发ajax请求
            const url = `https://api.github.com/search/users?q=${searchName}`
            axios.get(url).then(response =>{
                // 成功返回数据   得到响应的数据
                const result = response.data
                console.log(result)


                // 封装数据
                // 注意自己定义的属性名跟接受的参数是不一致的
                // 使用map() 方法  --  根据一个数组生成一个新的数组
                // {} 外面要有一个()  否则返回的就是函数体
                // 加了() 返回的就是函数
                // const users = result.items.map(item => ({name:item.login}))
                // 或者使用下面的return的写法
                const users = result.items.map(item => {
                    return {name:item.login, url:item.html_url, avatarUrl:item.avatar_url}
                })

                // 更新状态(成功)
                this.setState({
                    loading:false,
                    users:users
                })

            }).catch(error => {
                // 更新状态(失败)
                 this.setState({
                    loading: false,
                    errorMsg: error.message
                })
            })
            })
    }


    /*生命周期函数*/
    // 当组件接受到新的属性时就会调用这个函数
    componentWillReceiveProps(newProps) {  // 指定了新的搜索关键, 需要请求

    }



    /*发送异步请求
    * 需要根据更新了的  searchName  去发送异步请求
    *
    * */




    render() {
        const {initView, loading, users, errorMsg} = this.state
        const {searchName} = this.props
        console.log('render()', searchName)
        if (initView) {
            return <h2>请输入搜索关键字: {searchName}</h2>
        } else if (loading) {
            return <h2>正在请求中</h2>
        } else if (errorMsg) {
            return <h2>{errorMsg}</h2>
        } else {
            return (
                <div className="row">
                    {
                        // =>  不使用{}  而是直接使用()  这样可以不用写return
                        users.map((user,index) => (
                           <div className="card" key={index}>
                            <a href={user.url} target="_blank">
                                <img src={user.avatarUrl} style={{width: 100}}/>
                            </a>
                            <p className="card-text">{user.name}</p>
                           </div>
                        ))
                    }

                </div>
            )
        }
    }
}

